<template>
  <div style="height: 30px;background-color: white;margin: 10px;text-align: left;align-content: center">您好！
    <span style="color: red">{{data.user.name}}</span> &nbsp欢迎登录本系统 上次登录时间
    &nbsp<span style="color: green">{{data.logintime}}</span>
  </div>
  <div style="background-color: white;width: 90%">
    <div style="margin: 10px;font-weight: bold">系统公告</div>
    <el-timeline>
      <el-timeline-item color="#0bbc87" :timestamp="item.time" placement="top" v-for="item in data.noticedata">
          <h4 style="font-size: 15px">{{item.title}}</h4>
        <div v-html="item.content" style="max-height: 150px;overflow-y: scroll;-ms-overflow-style: none; scrollbar-width: none;"></div>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>
<script setup>
import {reactive} from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";

const data=reactive({
  user:JSON.parse(localStorage.getItem('code_user')||'{}'),
  logintime:new Date().toLocaleString(),
  noticedata:[],
})

const load = () => {
  request.get('/notice/selectAll').then(res => {
    if (res.code === 200) {
      data.noticedata = res.data;
      if (data.noticedata && data.noticedata.length > 5) {
        data.noticedata=data.noticedata.splice(0,5)
      }
    } else {
      ElMessage.error(res.msg)
    }
  })
}
load()
</script>
